<template>
  <!-- 柱状图+折线图  :colors="color"-->
  <ve-histogram
    :data="axisOption"
    :y-axis="yAxis"
    :extend="chartExtend"
    :settings="chartSettings"
    style="width: 100%; height: 100%"
    ref="table"
  ></ve-histogram>
</template>

<script>
export default {
  props: {
    echartDataSku: {
      type: Object,
      default() {
        return {
          columns: [],
          rows: [],
        };
      },
    },
  },
  name: "barLine",
  // props: {
  //   chartData: {
  //     type: Object,
  //     default() {
  //       return {
  //         columns: [],
  //         rows: [],
  //       };
  //     },
  //   },
  // },
  data() {
    this.title = {
      text: "折线图+柱状图",
    };
    this.color = ["rgb(255,204,51)", "rgb(0,143,224)", "rgb(217,0,27)"];
    this.chartSettings = {
      // "0.[00]a",
      yAxisType: ["0.[00]", "0.[00]%"],
      showLine: ["同比"],
      yAxisName: ["数值轴", "比率轴"],
      axisSite: {
        right: ["同比"],
      },
    };
    this.yAxis = [
      {
        show: true,
        splitLine: { show: false }, //去除网格线
        //设置轴线的属性
        axisLabel: {
          color: "#ccc", // 字体
        },
        axisTick: {
          //y轴刻度线
          show: true,
        },
        axisLine: {
          //y轴
          show: true,
        },
      },
      {
        show: true,
        splitLine: { show: false }, //去除网格线
        //设置轴线的属性
        axisLabel: {
          color: "red", // 字体
        },
        axisTick: {
          //y轴刻度线
          show: true,
        },
        axisLine: {
          //y轴
          show: true,
        },
      },
    ];

    return {
      chartExtend: {},
      axisOption: {
        // columns: ["日期", "高损", "负损", "达标率"],
        // rows: [
        //   { 日期: "1/3", 高损: 1393, 负损: 1093, 达标率: 1 },
        //   { 日期: "1/2", 高损: 3530, 负损: 3230, 达标率: 0.11 },
        //   // { 日期: "1/3", 高损: 2923, 负损: 2623, 达标率: 1200 },
        //   // { 日期: "1/4", 高损: 1723, 负损: 1423, 达标率: 1300 },
        //   // { 日期: "1/5", 高损: 3792, 负损: 3492, 达标率: 1600 },
        //   // { 日期: "1/6", 高损: 4593, 负损: 4293, 达标率: 2000 },
        // ],
      },
    };
  },
  watch: {
    echartDataSku: {
      handler: function (newnew, oldold) {
        console.log(newnew);
        // if (this.echartDataSku.columns.length < 1) {
        //   return;
        // }
        this.axisOption.columns = [];
        this.axisOption.rows = [];
        // this.chartSettings.axisSite.right = [];
        // this.chartSettings.showLine = [];
        // console.log(JSON.stringify(newnew));
        // this.echartDataSku.columns.forEach((item) => {
        //   if (item.includes("同比")) {
        //     return;
        //     this.chartSettings.axisSite.right.push(item);
        //     this.chartSettings.showLine.push(item);
        //     // if (item.includes("连带率")) {
        //     //   this.chartSettings.axisSite.right = [];
        //     //   this.axisOption = newnew;
        //     //   // this.axisOption.columns = this.chartData.columns
        //     // }
        //   } else {
        //     // this.chartSettings.axisSite.right = [];
        //     // this.axisOption = newnew;
        //     this.axisOption.columns.push(item);
        //   }
        // });
        this.axisOption.columns = this.echartDataSku.columns;
        this.axisOption.rows = this.echartDataSku.rows;

        this.initChart();
        // this.axisOption = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        // console.log(new Date());
        this.$nextTick(() => {
          // this.$refs.table.doLayout();
          this.$refs.table.echarts.resize();
          // console.log('渲染完成时间', new Date());
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initChart() {
      this.chartExtend = {
        series(v) {
          v.forEach((i) => {
            i.barWidth = 15;
            i.barGap = 0;
            // i.label = {
            //   position: "right",
            //   show: true,
            //   formatter: "{b}:{c}%",
            // };
            // i.itemStyle = {
            //   normal: {
            //     barBorderRadius: [10, 10, 0, 0],
            //     label: {
            //       show: true,
            //       position: "top",
            //       textStyle: {
            //         fontSize: "12",
            //         colcor: "red",
            //       },
            //     },
            //   },
            // };
          });
          return v;
        },
        xAxis(v) {
          v.forEach((i) => {
            i.show = true;
            i.splitLine = { show: false };
            i.axisTick = { show: true };
            i.axisLine = { show: true };
          });
          return v;
        },
      };
    },
  },
};
</script>